<template>
  <div class="full-right">
    <div class="full-right-table">
      <div class="full-right-table-title">
        {{ table1.title }}
      </div>
      <dv-scroll-board
        :config="tableData.data"
        style="width:100%;height:90%"
      />
    </div>
    <div class="full-right-chart">
      <div class="full-right-chart-title">
        {{ echarts.title }}
      </div>
      <VEcharts
        autoresize
        :options="echartsData.options"
        style="width: 100%; height: 90%"
      />
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import VEcharts from '@/components/vecharts';
import { getQueryBodyByProduce } from '@/api/dynamicInterface';
export default {
  components: {
    VEcharts
  },

  props: {
    echarts: {
      type: Object,
      default: () => []
    },
    table: {
      type: Object,
      default: () => ({})
    },
    table1: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      btnItem: '',
      tableData: {},
      echartsData: {}
    };
  },
  // computed: {
  //   tableData() {
  //     const data = _.cloneDeep(this.table);
  //     const tableData = data.data && data.data.data;
  //     tableData &&
  //       tableData.length &&
  //       tableData.forEach(i => {
  //         i[1] = `<span style="color:#c1c919;">${i[1]}</span>`;
  //         i[2] = `<span style="color:#C1C919;">${i[2]}</span>`;
  //         // if (i[3] === '低风险') {
  //         //   i[3] = `<span style="color:#37CA61;">${i[3]}</span>`;
  //         // } else if (i[3] === '中风险') {
  //         //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
  //         // } else if (i[3] === '高风险') {
  //         //   i[3] = `<span style="color:#9F2115;">${i[3]}</span>`;
  //         // }
  //         i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
  //       });
  //     return data;
  //   },
  //   menuList() {
  //     return this.$store.state.permission.menuList;
  //   }
  // },
  created() {
    this.getTableData();
    this.getEchartsData();
  },
  methods: {
    goEMa(val) {
      // console.log(val);
      const { row } = val;
      // const params={
      //   path: '/yjvld/sxbil/lhmeu',
      //   query:{
      //     PROGRAMNAME2:row[0]
      //   }
      // }
      // this.$router.push(params);
      this.getItem(this.menuList, '/digitalReportQr1/index.vue');
      this.goRoute(this.btnItem, row[0]);
    },
    getItem(arr, name) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].componentPath === name) {
          this.btnItem = arr[i];
        }
        if (arr[i].children) {
          this.getItem(arr[i].children, name);
        }
      }
    },
    goRoute(item, Name) {
      const params = {
        path: item.path,
        query: {
          parentName: item.parentTitle,
          title: item.title,
          menuId: item.id,
          flag: 0,
          sId: 'TabsTable',
          isHideLeft: item.isHideLeft,
          isHideTop: item.isHideTop,
          // isShow: true
          PROGRAMNAME2: Name
        }
      };
      if (item.isTargetNew + '' === '0') {
        this.$router.push(params);
      } else {
        const routeUrl = this.$router.resolve(params);
        const tempwindow = window.open('_blank'); // 先打开页面
        tempwindow.location = routeUrl.href; // 后更改页面地址
      }
    },
    getTableData() {
      const data = _.cloneDeep(this.table1);
      getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 100,
        tableId: 824,
        pageType: 1
      }).then(res => {
        if (res.success && res.data.length) {
          this.tableList = res.data;
          data.data.data = [];
          res.data.forEach(item => {
            const arr = [];
            arr[0] = item.PROGRAMNAME2;
            arr[1] = item.EJXMJE;
            arr[2] = item.PROGRAMNAME2 === '高标准农田建设' ? 4 : 0;
            data.data.data.push(arr);
          });
        }

        this.tableData = data;
      });
    },
    getEchartsData() {
      const data = _.cloneDeep(this.echarts);
      getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 100,
        tableId: 1024,
        pageType: 1,
        filterList: [{ col: 'ENTERPRISENAME', value: '齐贤街道' }]
      }).then(res => {
        if (res.success && res.data.length) {
          const arr = [];
          res.data.forEach(item => {
            arr.push({
              value: item.GS,
              name: item.FXLX
            });
          });
          data.options.series[0].data = arr;
          this.echartsData = data;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.full-right {
  padding: 20px;
  font-size: 18px;
  .full-right-table {
    background-image: url("~@/assets/images/fullscreen/xmlx.png");
    background-size: 100% 100%;
    padding: 10px;
    height: 55%;
    .full-right-table-title {
      height: 10%;
      color: #1fd2ff;
      padding-left: 20px;
    }
    .dv-scroll-board {
      color: #1fd2ff;
    }
  }
  .full-right-chart {
    margin-top: 10px;
    background-image: url("~@/assets/images/fullscreen/xmlx.png");
    background-size: 100% 100%;
    padding: 10px;
    height: calc(45% - 10px);
    .full-right-chart-title {
      height: 10%;
      color: #1fd2ff;
      padding-left: 20px;
    }
  }
}
</style>
